import {messages} from "share/common";
import React, {Component} from 'react';
import {Tabs} from "antd";
import ClaimAmountVerificationBasicSetting from "./basic-setting";
import ClaimAmountVerificationRuleSetting from "./rule-setting";
import "styles/request-and-expense-settings/claim-amount-verification.scss"

const TabPane = Tabs.TabPane;

class ClaimAmountVerification extends Component {

  state = {
    tabKey: 'basic-setting'
  };

  tabs = [{
    key: 'basic-setting',
    name: messages('expense-8.key98')/*基础设置*/,
  }, {
    key: 'rule-setting',
    name: messages('expense-8.key397')/*核定规则设置*/,
  }];

  renderContent = () => {
    const { tabKey } = this.state;
    if (tabKey === 'basic-setting') {
      return (
        <ClaimAmountVerificationBasicSetting />
      )
    } else {
      return (
        <ClaimAmountVerificationRuleSetting />
      )
    }
  };

  render() {
    const { tabKey } = this.state;
    return (
      <div className="full-height-page claim-amount-verification">
        <Tabs activeKey={tabKey} onChange={tabKey => this.setState({ tabKey })}>
          {this.tabs.map(tab => <TabPane tab={tab.name} key={tab.key}/>)}
        </Tabs>
        {this.renderContent()}
      </div>
    );
  }
}

export default ClaimAmountVerification;
